<template>
  <u-popup mode="center" :round="11" closeable :overlayStyle="{ 'touch-action': 'none' }" @close="cancelDelete"
    :closeOnClickOverlay="false" :show="showDeletePopup">
    <view class="scroll-popup">
      <!-- :class="{ 'fixed-touch': showDeletePopup }" -->
      <scroll-view scroll-y="true" class="scroll-view" :style="{ 'height': scrollPopupHeight }">
        <!-- 商品详情 -->
        <view class="goods-item-box goods-item-box-pay">
          <view :key="item.goods_id" v-for="item in ltemDeleted" class="goods-item-box_action">
            <view class="goods_box">
              <view class="goods_item">
                <view class="img_box">
                  <image class="img" mode="aspectFill" :src="`${baseUrl}${item.images_kv}`"></image>
                </view>
                <view class="content_box">
                  <view>
                    <view class="title">{{ item.shop_title }}</view>
                    <view class="server_box">
                      <view class="service">{{
                        item.service == 4 ? '礼包卡劵' : '实体商品'
                      }}</view>
                      <view class="service">{{ item.type_name1 }}</view>
                      <!-- <view class="service" v-if="item.service == 1">{{ postState }}</view> -->
                      <view class="service" v-if="item.buyers_num_max">团购</view>
                      <!-- <view class="service">{{ item.company_id }}</view> -->
                      <view class="comName">{{ shopComName(item.company_id) }}</view>
                    </view>
                  </view>
                  <view class="price_box">
                    <view class="prepaid_rice" v-if="item.prepaid_rice && item.prepaid_rice > 0">(订金)</view>
                    <view class="present">￥<text class="price">{{ item.price | moneyShow }}</text></view>
                    <view class="num">x{{ item.num }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="scroll-popup__title">*当前门店不存在以上商品，需移出购物车后才可支付。</view>
    <view class="btn--delete" @click="confirmDelete">删除商品</view>
  </u-popup>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'LtemDeleted',
  props: {
    // ltemDeleted: {
    //   type: Array,
    //   default() {
    //     return []
    //   }
    // },
  },
  data() {
    return {
      ltemDeleted: [],
      showDeletePopup: false,
      baseUrl: `${this.$baseUrl}/images/audi/library/`,
    }
  },
  computed: {
    ...mapGetters(['currComInfo']),
    ...mapState(['centers', 'goodsOrder']),
    postState() {
      if (this.hasPaidByShipper) {
        if (this.isPost) {
          return '包邮,只限该产品'
        } else {
          return '包邮,改到店领取'
        }
      } else {
        return '包邮'
      }
    },
    // 公司信息
    shopComName() {
      let centers = this.centers
      return function (id) {
        let name = centers.find(item => item.id == id)?.value
        return name
      }
    },
    // 要删除的商品弹窗高度
    scrollPopupHeight() {
      let len = this.ltemDeleted.length
      // let len = 3
      if (len < 5) {
        return `${len * 98 * 2 - 30}rpx`
      } else {
        return `60vh`
      }
    }
  },

  methods: {
    ...mapMutations(['deteleGoodsList']),
    // 到商品详情页
    // onClickGoods(id, company_id) {
    //   this.saveComIndex(company_id)
    //   uni.navigateTo({
    //     url: `/Shop/GoodsDetail?id=${id}&c=${company_id}`
    //   })
    // },
    cancelDelete() {
      let path = getCurrentPages()[0].route
      if (path == 'pages/Shop/ShopAdmin') {
        this.showDeletePopup = false
        // this.$emit('hasNeedDelete', { flag: true, path: true })
      } else {
        // 返回上一级
        uni.navigateBack({ delta: 1 })
      }
    },
    confirmDelete() {
      this.deteleGoodsList(this.ltemDeleted)
      this.showDeletePopup = false
      let path = getCurrentPages()[0].route
      if (path == 'pages/Shop/ShopAdmin') {
        this.$emit('hasNeedDelete', { flag: true, path: true })
      }
      this.$emit('hasNeedDelete', { flag: true })
    },
    getNeedDeleteGoods() {
      // this.showDeletePopup = true
      // this.$emit('hasNeedDelete', { flag: true, path: true })
      // this.$emit('hasNeedDelete', { flag: false })
      // return
      let list = this.goodsOrder
      let id = this.currComInfo?.id
      this.ltemDeleted = []
      for (let j = 0; j < list.length; j++) {
        let flag = list[j].company_ids.includes(id)
        if (!flag) {
          this.ltemDeleted.push(list[j])
        }
      }
      if (this.ltemDeleted.length) {
        this.showDeletePopup = true
        this.$emit('hasNeedDelete', { flag: false })
      }
    }
  },
}
</script>

<style scoped lang="scss">
@import '@/styles/mixins.scss';

.fixed-touch {
  position: fixed
}

.goods-item-box-pay {
  // margin: 0 30rpx 30rpx;
  // padding: 36rpx 16rpx;

  .goods-item-box_action {
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: #eee solid 1px;

    .goods_item {
      .content_box {
        height: 150rpx;

        .title {
          @include goods_title();
        }
      }

      .img_box {
        width: 150rpx;
        height: 150rpx;
      }
    }
  }
}

.goods-item-box {
  background: #fff;
  box-shadow: $theme-shadow2;

  .goods-item-box_action {
    display: block;

    &:nth-last-child(1) {
      margin: 0;
    }

    .goods_box {
      background: #fff;
      border-radius: 10rpx;

      .goods_item {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .img_box {
          border: 2rpx solid #f1f1f1;
          border-radius: 15rpx;
          overflow: hidden;
          flex-shrink: 0;

          .img {
            width: 100%;
            height: 100%;
          }
        }

        .content_box {
          margin-left: 20rpx;
          min-width: 0;
          display: flex;
          flex: 1;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-around;

          .title {
            margin-bottom: 4rpx;
            @include text-ellipsis();
          }

          .server_box {
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .service {
              text-align: center;
              font-size: 22rpx;
              padding: 2rpx 8rpx;
              border-radius: 6rpx;
              color: #999;
              background-color: #f1f1f1;
              margin-right: 10rpx;
              margin-top: 8rpx;
            }

            .comName {
              @include text-tag-light();
              margin-top: 8rpx;
              font-size: 20rpx;
            }
          }

          .price_box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .prepaid_rice {
              margin-right: 5rpx;
              color: $theme-color;
              font-size: 24rpx;
            }

            .present {
              margin-right: auto;


              .price {
                font-weight: bold;
                font-size: 30rpx;
              }
            }

            .num {
              margin-right: 8rpx;
              font-size: 26rpx;
              letter-spacing: 4rpx;
            }
          }
        }
      }
    }
  }
}

// 当前公司没有的商品组件
.scroll-popup {
  padding: 40rpx 16rpx 0 16rp;
  margin: 60rpx 30rpx 0 30rpx;

  .scroll-view {
    // width: 80vw;
    // border: #f00 solid 1px;
    // height: 60vh;
  }

  &__title {
    font-size: 24rpx;
    text-align: center;
    line-height: 80rpx;
    color: $theme-color;
    // border: #f00 solid 1px;
    // background-color: #eee;
  }
}

.btn--delete {
  width: 50%;
  margin: 0 auto 30rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  line-height: 70rpx;
  text-align: center;
  color: #f1f1f1;
  background-color: #cf4744;
}
</style>
